<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="hello">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>drag&drop</title>
  <style type="text/css">
	*{margin:0;padding:0;}
	ul,ol{list-style:none;}
	a{text-decoration:none;}

	#box{
		position: absolute;
		left: 0;
		top: 0;
		width:100px;
		height:100px;	
		cursor:move;
		background-color: red;
	}
  </style>
 </head>
 <body>
	<div id="box"></div>


	<script>
		/*拖拽的3个事件 onmousedown onmousemove onmouseup*/
		var oBox = document.getElementById("box");

		oBox.onmousedown = function(e){
			e = e || window.event;
			var sX = e.clientX,
				sY = e.clientX,
				sL = this.offsetLeft,
				sT = this.offsetTop;

			document.onmousemove = function(e){
				e = e || window.event;
				var nx = e.clientX,
					ny = e.clientY,
					_x = nx - sX,//每次事件计算偏移量
					_y = ny - sY;
				oBox.style.left = sL + _x + "px";
				oBox.style.top = sT + _y + "px";
			}
		}

		oBox.onmouseup = function(){
			document.onmousemove = null;
		}
	</script>
 </body>
</html>
